<template>
  <view class="page flex flex-direction">
    <!-- 顶部导航栏 start -->
    <view class="cu-custom">
      <view
        class="cu-bar fixed bg-theme"
        :style="{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }"
      >
        <view class="action" @tap="backPage"
          ><text class="cuIcon-back text-white"></text
        ></view>
        <view class="content" :style="[{ top: StatusBar + 'px' }]"
          ><view class="text-lg text-white">{{i18n['积分商城']}}</view></view
        >
        <view class="margin-right"
          ><text class="cuIcon-question text-white" @click="toRule"></text
        ></view>
      </view>
    </view>
    <!-- 顶部导航栏 end -->
    <!-- 积分统计 start -->
    <view class="con bg-theme marg-top-8">
      <navigator
        url="/pages/integral/myintegral/integral-exchange-record/index?type='all'"
        class="shop_btn"
        >{{i18n['兑换记录']}}</navigator
      >
      <view class="con_jifen">
        <view
          class="flex flex-direction justify-center align-center text-white"
        >
          <text style="font-size: 48upx; font-weight: 400">{{
            integral || "0"
          }}</text>
          <text style="font-size: 24upx; font-weight: 400; opacity: 1"
            >{{i18n['可用积分']}}</text
          >
        </view>
        <view class="flex justify-center align-center" style="height: 120upx"
          ><view style="height: 50upx; width: 2upx; background: #ffffff"></view
        ></view>
        <view
          class="flex flex-direction justify-center align-center text-white"
        >
          <text style="font-size: 48upx; font-weight: 400">{{
            integral || "0"
          }}</text>
          <text style="font-size: 24upx; font-weight: 400; opacity: 1"
            >{{i18n['当前积分']}}</text
          >
        </view>
      </view>
    </view>
    <!-- 积分统计 end -->
    <!-- 页面初始化加载 loading start -->
    <fu-loading v-if="isShowLoading"></fu-loading>
    <!-- 页面初始化加载 loading end -->
    <block v-else>
      <!-- 商品list start -->
      <view class="list">
        <block v-for="(item, index) in list" :key="index">
          <view class="order-item">
            <view
              class="padding-sm flex"
              style="border-top: 1px solid #f5f5f5"
              @tap="navToDetail(item)"
            >
              <view class="block-250 margin-right-sm radius overHidden">
				  <fu-image :src="item.thumb | assembleImgSrc" mode="aspectFill"></fu-image>
              </view>
              <view class="flex-sub hidden flex flex-direction justify-between">
                <view class="text-df text-cut-2">{{ item.name }}</view>
                <view class="text-sm text-cut">{{ item.description }}</view>
                <view class="text-sm">
                  <text class="text-gray">{{i18n['剩余']}} {{ item.stock }}</text>
                  <text class="margin-left" v-if="item.is_change == 1"
                    >{{i18n['已兑']}}</text
                  >
                </view>
                <view
                  class="flex justify-between align-center"
                  v-if="item.is_pure_integral == 1"
                >
                  <view class="text-xxl text-osd color1">
                    {{ item.sales_integral }}
                    <text class="text-sm margin-left-xs">{{i18n['积分']}}</text>
                  </view>
                  <button class="cu-btn buttons bg-theme text-white">
                    {{i18n['兑换']}}
                  </button>
                </view>
                <view class="flex justify-between align-center" v-else>
                  <view class="flex flex-direction">
                    <view class="text-lg text-osd color1">
                      {{ item.sales_integral }}
                      <text class="text-sm">{{i18n['积分']}}</text>
                      +
                      <text class="text-price">{{ item.activity_price }}</text>
                    </view>
                    <!-- <view class="margin-top-xs fu-cred  font-size-40 text-price">{{item.activity_price}}</view> -->
                  </view>
                  <button class="cu-btn buttons bg-theme text-white">
                    {{i18n['购买']}}
                  </button>
                </view>
              </view>
            </view>
          </view>
        </block>
        <!-- 加载状态 start -->
        <uni-load-more v-if="list.length > 0" :status="status"></uni-load-more>
        <!-- 加载状态 end -->
      </view>
      <!-- 商品list end -->
      <!-- 空布局 -->
      <fu-empty-ui v-if="list.length == 0 && isInit"></fu-empty-ui>
      <!-- 你可能还喜欢 start-->
      <fu-waterflow
        :titleNone="i18n['你可能还喜欢']"
        v-if="list.length == 0"
        ref="guess"
      ></fu-waterflow>
      <!-- 你可能还喜欢 end-->
    </block>
  </view>
</template>
<script>
export default {
  data() {
    return {
      isInit: false, // 是否请求过数据
      CustomBar: this.CustomBar, //标题栏高度
      StatusBar: this.StatusBar, //状态栏高度
      integral: 0, //    积分
      status: "more", //  加载状态  more:有更多数据  noMore:已加载全部数据  loading:数据加载中
      isShowLoading: false, // 页面初始化 加载loading
      page: 1, //页数
      size: 10, //一页显示几条
      list: [], //商品列表
    };
  },
  /**
   * @description 下拉加载
   */
  onPullDownRefresh() {
    this.page = 1;
    this.status = "more";
    this.loadDataList();
    uni.stopPullDownRefresh();
  },
  /**
   * @description 触底加载
   */
  onReachBottom() {
    this.$refs.guess && this.$refs.guess.loadData();
    this.loadDataList();
  },
  /**
   * @description  页面初始化  请求数据
   */
  onShow() {
    if (global.token) {
      this.$refs.guess && this.$refs.guess.loadData();
      this.page = 1;
      this.status = "more";
      this.getIntegralInfo();
      this.loadDataList();
    } else {
      this.$store.dispatch("getCartList");
    }
  },

  methods: {
    /**
     * @description  返回上一个页面
     */
    backPage() {
      uni.navigateBack({
        delta: 1,
      });
    },
    /**
     * @description 去商品详情
     * @param {Object} item  id:商品id,sku_id:规格id ,activity_id：活动id
     */
    navToDetail(item) {
      uni.navigateTo({
        url: `/pages/integral/integralgoods/integral-goods-detail/index?goods_id=${item.id}&sku_id=${item.sku_id}&activity_id=${item.activity_id}&integral=${this.integral}`,
      });
    },
    /**
     * @description 商品列表请求
     */
    loadDataList() {
      //若数据已加载完毕 就不让再加载
      if (this.status != "more") return;
      this.status = "loading";
      this.isShowLoading = true;
      let data = {
        cid: this.type,
        page: this.page,
        list_rows: this.size,
        user_id: global.userInfo.id,
        type: 8,
        cid: 0,
      };
      this.$api
        .post(global.apiUrls.postSeckillList, data)
        .then((res) => {
          console.log("兑换商品: ", res);
          //数据请求完毕  关闭loading
          this.isShowLoading = false;
          if (res.data.code == 1) {
            var totalSize = res.data.data.total;
            var curPageData = res.data.data.list;
            if (this.page == 1) this.list = [];
            this.list = this.list.concat(curPageData);
            if (this.list.length < totalSize) {
              this.status = "more";
              this.page++;
            } else {
              this.status = "noMore";
            }
          }
          //数据请求完毕  关闭下拉加载
          uni.stopPullDownRefresh();
          this.isInit = true;
        })
        .catch((err) => {
          //数据请求完毕  关闭loading/下拉加载
          this.isShowLoading = false;
          uni.stopPullDownRefresh();
        });
    },
    /**
     * @description 获取积分统计
     */
    getIntegralInfo() {
      this.$api
        .get(global.apiUrls.getMyMoney)
        .then((res) => {
          console.log("金额信息: ", res);
          if (res.data.code == 1) {
            this.integral = res.data.data.score;
          } else {
            this.$message.info(res.data.msg);
          }
        })
        .catch((err) => {
          console.log("err: " + JSON.stringify(err));
        });
    },
    /**
     * @description 跳转到兑换规则
     */
    toRule() {
      uni.navigateTo({
        url: "/pages/integral/myintegral/integral-points-rules/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
//  积分统计 start
.marg-top-8 {
  margin-top: 80rpx;
}

.con {
  position: relative;
  height: 250upx;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 50upx;

  .con_jifen {
    margin-top: 70upx;
    height: 120upx;
    width: 80%;
    display: flex;
    justify-content: space-around;
  }
}

//  积分统计 end
// 商品list start
.list {
  .order-item {
    display: flex;
    flex-direction: column;
    /* padding-left: 30upx; */
    background: #fff;
    margin: 16upx 16upx 0 16upx;
    border-radius: 16rpx;

    .bg-theme {
      background: $fu-main-color;
      color: #fff;
    }

    .list-wrap {
      padding: 0 30rpx;
    }

    .block-250 {
      width: 250rpx;
      min-width: 250rpx;
      height: 250rpx;
      min-height: 250rpx;
    }

    .hidden {
      overflow: hidden;
    }

    image {
      width: 100%;
      height: 100%;
    }

    .color1 {
      color: $theme;
    }

    .buttons {
      width: 120rpx;
      height: 48rpx;
      border-radius: 50rpx;
      font-size: 24rpx;
    }

    .text-cut-2 {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
}

// 商品list end
//兑换记录 start
.shop_btn {
  position: absolute;
  right: 0;
  top: 55%;
  color: $fu-main-color;
  background: rgba(255, 255, 255, 0.65);
  padding: 10rpx;
  font-size: $uni-font-size-sm;
  margin-top: -1.5em;
}

//兑换记录 end
</style>
